<template>
  <div>
    <!--三级分类卡片-->
      <el-card>
        <!--idChange: 当三级分类分类数据产生切换时触发-->
        <CategorySelector @idChange="idChange"></CategorySelector>
      </el-card>

      <el-card style="margin: 20px 0">
        <!--spuList列表的显示界面-->
        <div v-show="showList">
          <!--添加按钮-->
          <el-button type="primary" icon="el-icon-circle-plus-outline"
                     :disabled="!category3Id" @click="showAdd">添加SPU</el-button>
          <!--SPU列表-->
          <el-table style="margin: 20px 0" border :data="spuList" v-loading="loading">
            <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
            <el-table-column align="center" label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column align="center" label="SPU描述" width="480" prop="description"></el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="{row}">
                <HintButton title="添加SKU" type="primary" icon="el-icon-circle-plus-outline"
                            size="mini"></HintButton>
                <HintButton title="查看所有SKU" type="info" icon="el-icon-info"
                            size="mini" ></HintButton>
                <HintButton title="修改SPU" type="primary" icon="el-icon-edit"
                            size="mini" @click="showEdit(row)"></HintButton>
                <HintButton title="删除SPU" type="danger" icon="el-icon-delete"
                            size="mini" ></HintButton>
              </template>
            </el-table-column>
          </el-table>

          <!--分页组件-->
          <el-pagination
            style="text-align: center"
            background
            layout="prev, pager, next, jumper,  ->, sizes, total"
            :current-page="page"
            :pager-count="5"
            :page-sizes="[3,6,9]"
            :page-size="limit"
            :total="total"
            @current-change="changePage"
            @size-change="changeSize">
          </el-pagination>
        </div>

        <!--spuList新增和修改界面-->
        <spuForm v-show="!showList" ref="spuForm" @success="successFn"></spuForm>
        <!--<spuForm :vis.sync="showList"></spuForm>-->
        <!--<spuForm :vis="showList" @update:vis="showList=$event"></spuForm>-->

      </el-card>

  </div>
</template>

<script>
import spuForm from "../components/spuForm"
export default {
  name: 'SpuList',
  data(){
    return {
      category1Id:"",
      category2Id:"",
      category3Id:"",
      spuList:[],  //[{spuName,description...},{}]
      loading:false,

      page:1, //当前页码
      limit:3, //每页显示多少数据 这个值一定要在page-sizes中找
      total:0,

      showList:true //是否显示spu列表页面
    }
  },
  methods:{
    //重新刷新列表数据
    successFn(){
      this.getSpuList(this.page)
    },
    //发送请求获取spu列表
    async getSpuList(pageNo=1){
      this.page = pageNo;
      this.loading = true;
      const {data:{records,total}} = await this.$API.spu.getSpuList(this.page,this.limit,this.category3Id);
      this.loading = false;
      this.spuList = records;
      this.total = total;
    },
    //当三级分类的id产生变化时 自动调用的函数
    idChange({id,level}){
      //当三级分类产生变化的时候 我们要发送请求去获取分类对应的属性数据
      switch (level){
        case 1:
          //当一级分类产生变化 当前组件中的category2Id category3Id arrs得重置
          this.category1Id = id;
          this.category2Id = "";
          this.category3Id = "";
          this.spuList = []
          break;
        case 2:
          //当二级分类产生变化 当前组件中的category3Id arrs得重置
          this.category2Id = id;
          this.category3Id = "";
          this.spuList = []
          break;
        case 3:
          this.category3Id = id;
          this.getSpuList()
          break;
      }
    },
    //改变每页显示数量的函数
    changeSize(size){
      //size:新的每页数量
      this.limit = size;
      //默认显示第一页
      this.getSpuList()
    },
    //改变页码的函数
    changePage(pageNo){
      this.getSpuList(pageNo)
    },
    //显示添加界面
    showAdd(){
      this.showList = false;
      //调用spuForm中的reset方法
      this.$refs.spuForm.reset();
      this.$refs.spuForm.initAddData(this.category3Id)
    },
    //显示编辑界面
    showEdit(row){
      //row : 代表一个简要的spu信息
      this.showList = false;
      //得到品牌 和 销售属性列表
      //让spuForm发送请求获取习惯的下拉列表数据 为spu的回显做准备
      this.$refs.spuForm.initUpdateData(row.id)
    },
    // 显示列表页
    showListFn(){
      this.showList = true;
    }
  },
  components:{
    spuForm
  }
}
</script>
